<template>
    <div class="h-100 pt-10">
        <v-btn color="pink" style="margin-left: 20px;" @click="ifream.show = !ifream.show" :disabled="!isURL">
            显示外部连接
            <v-icon icon="mdi-link-plus"></v-icon>
            <v-tooltip activator="parent" location="bottom" :disabled="isURL">是否显示</v-tooltip>
        </v-btn>
        <br />
        <input type="text" v-model="ifream.url" style="width: 500px;margin-top: 20px;margin-left: 20px;">

        <teleport to="html">
            <div v-if="ifream.show" class="modal">
                <iframe id="ifrema" :src="ifream.url" frameborder="0" :width="ifream.width"
                    :height="ifream.height"></iframe>
            </div>
        </teleport>
    </div>
</template>
<script lang="ts" setup>
import { isExternal } from '@/utils/validate'
import { reactive, computed } from "vue";
import { onBeforeRouteLeave } from 'vue-router';

const rules = reactive([
    (value: string | undefined) => !!value || '请填写地址！',
    (value: string | undefined) => (value && isExternal(value)) || '请输入一个合法url地址！',
])


interface CustomIframe {
    width?: any,
    height?: any,
    show?: boolean,
    url: string
}

let ifream = reactive<CustomIframe>({
    url: 'https://cn.vuejs.org/api/built-in-components.html#teleport',
    width: 500,
    height: '100%',
    show: false
})

const isURL = computed(() => isExternal(ifream.url))

// onBeforeRouteLeave((to, from, next) => {
//     // 取消显示
//     ifream.show = false
//     next(to.path)
// })


</script>

<style scoped>
.flex {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}

input {
    outline: teal 1px solid;
    height: 30px;
    border: none;
    color: burlywood;

}

input:focus {
    outline: red 1px solid;
}

.modal {
    position: fixed;
    z-index: 9999999;
    top: 0px !important;
    right: 0px !important;
    width: 500px;
    height: 100vh;
    overflow: hidden;
}
</style>